<!--配对成功-->
<template>
    <div class="match-success">
        <div class="relative">
            <image class="bg-img" src="/static/image/xxm/model-bg.png"> </image> 
            <div class="content-box " :class="{'content-box-active':contentTansition }" >
                <!-- 置顶 -->
                <div class="content-main">  
                    <div class="title text-center">可爱的小主</div> 
                    <div class="text" v-html="content"></div> 
                    <div class="know_btn text-center"   @click="closeMatchSuccess">知道了~</div>
                </div>    

                <div class="close-btn"  @click.stop="closeMatchSuccess">
                    <div class="icon-position">
                        <image class="close-img" src="/static/image/xxm/vip-close.png"> </image>
                    </div> 
                </div>  
            </div> 
            <!--模态框-->
            <div class="vip-modul"  @click="closeMatchSuccess"></div>
        </div> 
    </div> 
</template>

<script>  
import * as api from '@/utils/api'; 
const app = getApp();
export default {
    props: { 
          
    },
    components: {  

    },
    onLoad(){
        this.getInfo();
    },
    data(){
        return { 
            contentTansition:false,
            content:""
        }
    }, 
    mounted() {
        let vm = this;   
        let cTime=setTimeout(()=>{
            vm.contentTansition=true;
            clearTimeout(cTime);
        },200)
    },
    methods:{ 

        getInfo(){
            let vm = this;
            api.getSysInfo({type:'welcome'}).then(res=>{
            vm._data.content = res.data.data.content
          })
        },
        //倒计时
        settime() { 
            let vm = this;
            if (vm.closeTime > 0) {  
                vm.closeTime--;
                vm.timeParme=setTimeout(function() {
                    vm.settime();
                },1000) 
            } else { 
                vm.closeMatchSuccess();
            }
        }, 
        userSwiperChange(e){ 
            this.vipCurrent=e.mp.detail.current;
        },
        closeMatchSuccess(){
            clearInterval(this.setTimeData);
            this.$emit('close');
        }, 
        
       
        topBtn(){
            clearInterval(vm.setTimeData);
            this.$emit('topBtn');
        },
    }
}
</script>

<style scoped lang="scss">
.match-success{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%; 
    z-index:20000; 
    color:#fff;
    .relative{
        width:100%;
        height:100%;
        position:relative;
        .close-btn{
            position:absolute;
            bottom:-132rpx;
            left:50%;
            width:72rpx;
            height:132rpx;
            margin-left:-48rpx;
            z-index:10; 
            .icon-position{
                width:100%;
                height:100%;
                position: relative;
                &:active{
                    opacity:.8;
                }
                &::before{
                    content:'';
                    position:absolute;
                    top:0;
                    left:50%;
                    margin-left:-1rpx;
                    height:62rpx;
                    width:2rpx;
                    background:#fff;
                    z-index: 11;
                }
                .close-img{
                    position: absolute;
                    bottom:0;
                    left:0;
                    width:72rpx;
                    height:72rpx; 
                    z-index: 12; 
                }
                
            }
        }
    }

    .content-box{   
        height:793rpx;
        width:640rpx;
        position:absolute;
        top:-100%;
        left:50%;
        margin-left:-320rpx;
        margin-top:-450rpx;
        background:transparent;
        border-radius:20rpx;
        z-index:20003;
        transition:all .5s;  
        .content-main{
            padding:100rpx;
            .title{ 
                font-size:42rpx;
                font-family:PingFang SC;
                font-weight:600;
                color:rgba(14,14,14,1);
                margin-top:90rpx;

            }
            .text{ 
                font-size:30rpx; 
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:46rpx;
                margin-top:60rpx;
            }
            .know_btn{
                position:absolute;
                bottom:90rpx;
                left:120rpx;
                width:420rpx;
                height:88rpx;
                line-height:88rpx;
                font-size:30rpx;
                background:linear-gradient(0deg,rgba(77,141,249,1),rgba(86,117,254,1));
                box-shadow:0px 2rpx 7rpx 0px rgba(82,127,252,0.48); 
            }
        }
    }
    .bg-img{
        height:793rpx;
        width:640rpx;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-320rpx;
        margin-top:-450rpx; 
        border-radius:20rpx;
        z-index:20002;
        transition:all .5s; 
    }
     
    .content-box-active{
        top:50%;
        transition:all .3s;
    }
    .vip-modul{
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:rgba(50,50,50,0.7);
        z-index:20001;
    }
}

</style>
